<template>
  <div class="content">
    <div class="content_index">
      <!-- 搜索和新增 -->
      <p class="content_header">
        <input type="text" class="serch_input" placeholder="地区关键字" />
        <el-button type="primary" @click="add_list">新增</el-button>
      </p>
      <!-- 数据渲染 -->
      <el-tree
        :data="Store_address.address_list"
        :props="defaultProps"
        node-key="areaId"
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
      >
        <template #default="{ node }">
          <span class="custom-tree-node">
            <span class="label">{{ node.label }}</span>
            <span class="right">
              <a @click="edit_list(node)"> 编辑 </a>
              <a style="margin-left: 8px" @click="del_list(node)"> 删除 </a>
            </span>
          </span>
        </template>
      </el-tree>
      <!-- 新增弹框 -->
      <el-dialog v-model="dialogFormVisible" :title="title">
        <el-form :model="form">
          <el-form-item label="地区名称" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入地区名称"
              v-model="address_user"
              maxlength="50"
              show-word-limit
              type="text"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="上级地区" :label-width="formLabelWidth">
            <el-cascader
              :options="Store_address.address_list"
              :props="flag_defaultProps"
              clearable
              @change="(value) => changes(value)"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="submit"> 确认 </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { address } from "../../../../store/address";
const Store_address = address();
//弹框
const dialogFormVisible = ref(false);
const title = ref("新增");
const getlist = () => {
  Store_address.get_list();
};
getlist();
interface Tree {
  label: string;
  children?: Tree[];
}

const handleNodeClick = (data: Tree) => {};

const defaultProps = {
  children: "children",
  label: "areaName",
};

const address_user = ref("");

const flag_defaultProps = {
  label: "areaName",
  children: "children",
  value: "areaId",
  checkStrictly: true,
};
//添加要插入联级的id
let add_parentId = 0;
//插入的级数
let level = 0;
//添加选中的id
let add_areaId = 0;

let edit_parentId = 0;

let edit_areaId = 0;

let editId = 0;
const props1 = {
  checkStrictly: true,
};

const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const add_list = () => {
  title.value = "新增";
  dialogFormVisible.value = true;
};

const edit_list = (node: any) => {
  title.value = "编辑";
  console.log(node, "node");

  dialogFormVisible.value = true;
  address_user.value = node.data.areaName;
  editId = node.data.areaId;
};

const submit = () => {
  if (title.value == "新增") {
    Store_address.add_list({
      address_user: address_user.value,
      parentId: add_parentId,
      level: level,
    });
    dialogFormVisible.value = false;
  } else {
    Store_address.edit_list({
      address_user: address_user.value,
      areaId: editId,
      level: level + 1,
      parentId: edit_parentId,
    });
    dialogFormVisible.value = false;
  }
};

//练级器中获取选中数据的id
const changes = (e: any) => {
  if (e.length == 1) {
    edit_areaId = e[0];
    edit_parentId = e[0];
    add_parentId = e[0];
  } else if (e.length == 2) {
    edit_areaId = e[1];
    edit_parentId = e[1];
    add_parentId = e[1];
  } else {
    edit_areaId = e[e.length - 1];
    edit_parentId = e[e.length - 2];
    add_parentId = e[e.length - 1];
  }
  level = e.length;
  console.log(e, "parentId");
};

const del_list = (obj: any) => {
  ElMessageBox.confirm("确定进行删除操作?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    Store_address.del_list(obj);
  });

};
</script>

<style scoped>
@import url("./index.css");
.dialog-footer button:first-child {
  margin-right: 10px;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 30vw;
}
.el-input {
  width: 30vw;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>